<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <title>Geocode Example</title>
    
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
    	  rel="stylesheet" 
          type="text/css" />
          
    <!-- Google Maps API -->
    <script type="text/javascript" 
	 	src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
    </script> 
    
    <script type="text/javascript">
      
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      var geocoder;
     
      // Karte initialisieren mit festen Koordinaten als Mittelpunkt
      function initialize() {
		    
			// Geocoder initialisieren
            geocoder = new google.maps.Geocoder();
			
			// DirectionsRenderer initialisieren
            directionsDisplay = new google.maps.DirectionsRenderer();
			
			// Kartenoptionen
            var myOptions = {
              zoom: 10,
              navigationControl: true,
              mapTypeControl: true,
              scaleControl: true,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
            }
                
        // Funktion die einen Ort geocodiert und Ihn dann mittels
        // eines Markers auf der Karte anzeigt
        function myGeocode(ort) {
			
        // Ort der Codiert werden soll
        var address = ort;
        
		// Erfolgreich geocodiert?
        if (geocoder) {
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
    
			  // Mittelpunkt auf geocodierten Ort setzen
              map.setCenter(results[0].geometry.location);
              
			  // Marker setzen
              var marker = new google.maps.Marker({
                  map: map, 
                  position: results[0].geometry.location
              });
              
              // Objekt um die Koordinaten des Markersn zu lesen
              var myLatLng = new google.maps.LatLng();
              myLatLng = marker.getPosition();
             
              // Längen und Breitengrad bestimmen
              var myPointX = new google.maps.Point();
              var myPointY = new google.maps.Point();
              
              myPointX = myLatLng.lat();
              myPointY = myLatLng.lng();
              
              // Werte in Textfelder schreiben
              document.getElementById("posX").value = myPointX;
              document.getElementById("posY").value = myPointY;
            } 
            
          });
        }
      }
        	// Karte anzeigen
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
			// Route anzeigen
			directionsDisplay.setMap(map);
            
			// Ort der zu Geocodieren ist
            var myTextField = document.getElementById('ort').value;
            myGeocode(myTextField);

      }

    </script>
</head>

<body onload="initialize()">

    <!-- Platz für die Karte reservieren -->
    <div id="map_canvas" style="float:left;width:50%;height:50%;"></div>
    
    <!-- Steuerung und Ausgabe -->
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
      <form action="" method="post" name="myForm" id="myForm">
        <p>
          <label for="posX"></label>
          <input type="text" name="posX" id="posX">
          <input type="text" name="posY" id="posY">
        </p>
        <p>
          <label for="ort"></label>
          <input name="ort" type="text" id="ort" value="Zweibrücken">
        </p>
      </form>
    </div>
    
</body>

</html>
